<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c1" width="600" height="400">
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>

    <script>
        /** @type {HTMLCanvasElement} **/
        var c1 = document.getElementById("c1");
        var ctx = c1.getContext("2d");
        
        //ctx.arc(圆心x,圆心y,半径r,开始的角度，结束的角度,默认顺时针false-逆时针为true)
        ctx.beginPath();
        ctx.arc(200,200,100,0,Math.PI*2);
        ctx.moveTo(275,200);

        ctx.arc(200,200,75,0,Math.PI);
        
        ctx.moveTo(155,170);
        ctx.arc(140,170,15,0,Math.PI*2);

        ctx.moveTo(275,170);
        ctx.arc(260,170,15,0,Math.PI*2);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        //第一个点
        ctx.moveTo(500,100);
        //arcto(第二个点x,y,第三个x,y);
        ctx.arcTo(400,300,200,200,70);
        ctx.stroke();
        ctx.closePath();
</script>
</body>
</html>